<template>
  <div>
    <el-row><h4>第{{data._id}}期近期频率</h4></el-row>
    <el-row>
      <el-col :span="4"><h4>最近期数</h4></el-col>
      <el-col :span="4"><h4>高频蓝球</h4></el-col>
      <el-col :span="4"><h4>高频红球</h4></el-col>
      <el-col :span="4"><h4>低频篮球</h4></el-col>
      <el-col :span="4"><h4>低频红球</h4></el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><h4>二十期</h4></el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_20.blue_hot" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_20.red_hot" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_20.blue_cold" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_20.red_cold" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><h4>五十期</h4></el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_50.blue_hot" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_50.red_hot" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_50.blue_cold" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_50.red_cold" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><h4>八十期</h4></el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_80.blue_hot" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_80.red_hot" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_80.blue_cold" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_80.red_cold" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><h4>百期</h4></el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_100.blue_hot" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_100.red_hot" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_100.blue_cold" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
      <el-col :span="4">
        <span v-for="ball in data.frequency_100.red_cold" :key="ball.ball"> {{ball.ball}} </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '../http'

export default {
  name: 'Frequency',
  data () {
    return {
      data: {},
      loading: true
    }
  },
  methods: {
    getFrequencies() {
      http.get('/frequency/latest').then(
        response => (
            this.data = response.data.data,
            this.loading = false)
      )
    }
  },
  created () {
    this.getFrequencies()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>